<!-- 物流查询 -->
<template>
    <div class="app-container page-content-body">
        <div class="search-container">
            <el-form :class="['search-container']" :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
              <el-form-item label="快递公司" prop="deliverId">
                <el-select
                  v-model="queryParams.deliverId"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入快递公司名称"
                  :remote-method="onGetDeliverList"
                  :loading="isLoadingDeliverList"
                >
                    <el-option
                      v-for="item in deliverList"
                      :key="item.delivery_id"
                      :label="item.delivery_name"
                      :value="item.delivery_id">
                    </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="常用快递" prop="historyStr">
                <el-input v-model="queryParams.historyStr" @keyup.enter.native="handleQuery" :clearable="true" placeholder="请输入"/>
              </el-form-item>

              <el-form-item label="备注" prop="poleCode">
                <el-input v-model="queryParams.poleCode" @keyup.enter.native="handleQuery" :clearable="true" placeholder="请输入"/>
              </el-form-item>

            </el-form>

            <el-input class="form-textarea" v-model="queryParams.poleCode" type="textarea" resize="none" rows="4" @keyup.enter.native="handleQuery" :clearable="true" placeholder="请输入单号，逗号分隔，系统自动去重"/>
            <div class="lz-margin-bottom-0 lz-margin-left-18 btn-group">
              <el-button size="small" type="primary" class="btn" @click="handleQuery">查询</el-button>
            </div>
        </div>

        <div class="table-container mt-20">
          <div class="table-operation">
            <div class="left-module">
              <el-button 
                class="btn" 
                type="primary" 
                size="small" 
                @click="handleClickTableBtn(item.click_fun)"
                v-for="(item, index) in userBtnList"
                :key="index"
              >{{ item.btn_name }}</el-button>
            </div>
            <div class="right-module">
              <el-button class="btn btn-icon" icon="el-icon-refresh" @click="handleRefresh" />
            </div>
          </div>
          <div class="tab-operation">
            <el-tabs v-model="activeTabName" type="card" @tab-click="handleSwitchTab">
              <el-tab-pane :name="item.click_fun" v-for="(item, index) in userTabList" :key="index" :label="item.tab_name"></el-tab-pane>
            </el-tabs>
          </div>
          <el-table 
              v-loading="loading" 
              :data="dataList" 
              @select="handleSelect" 
              :height="`calc(100vh - 460px)`"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="单号" prop="req" />
            <el-table-column label="轨迹数量" prop="num">
              <template slot-scope="scope">
                {{ scope.row.num ? scope.row.num : '-' }}
              </template>
            </el-table-column>
            <el-table-column label="最新状态" prop="delivery_status">
              <template slot-scope="scope">
                {{ scope.row.delivery_status ? scope.row.delivery_status : '-' }}
              </template>
            </el-table-column>
            <el-table-column label="最新时间" prop="updated_at">
              <template slot-scope="scope">
                {{ scope.row.updated_at ? scope.row.updated_at : '-' }}
              </template>
            </el-table-column>
            <el-table-column label="最新城市" prop="poleCode">
              <template slot-scope="scope">
                {{ scope.row.poleCode ? scope.row.poleCode : '-' }}
              </template>
            </el-table-column>
            <el-table-column label="最新轨迹" prop="systemCode">
              <template slot-scope="scope">
                {{ scope.row.systemCode ? scope.row.systemCode : '-' }}
              </template>
            </el-table-column>
            <el-table-column label="正在派送" prop="status">
              <template slot-scope="scope">
                {{ getLabelInfoByValue(scope.row.status, 'deviceStatus').label }}
              </template>
            </el-table-column>
          </el-table>
          <div class="table-bottom">
            <div class="batch-operation"></div>
            <pagination align="right" layout="total, sizes, prev, pager, next" v-show="total > 0" :total="total"
            :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" next-text="下一页"
            prev-text="上一页" />
          </div>
        </div>

        <!-- 创建查询任务 -->
        <create-task-dialog v-if="isShowCreateTaskDialog" @onCloseTaskDialog="handleCloseTaskDialog"/>
        <!-- tab设置 -->
        <tab-setting-dialog v-if="isShowTabSettingDialog" @onChangeTabDialogVisible="handleChangeTabDialogVisible"/>
        <!-- 按钮设置 -->
        <btn-setting-dialog v-if="isShowBtnSettingDialog" @onChangeBtnDialogVisible="handleChangeBtnDialogVisible"/>
    </div>
  </template>
  <!--vue -->
  <script>
  import { getDeliveryCompanyList, getDeliveryHistory } from "@/api/group/base";
  import { 
    getUserButtons, getUserTabs, getUserFields, getAllFields, getTaskList, requeryTask
  } from '@/api/group/searchTask';
  import createTaskDialog from './components/createTaskDialog/index.vue';
  import tabSettingDialog from './components/tabSettingDialog/index.vue';
  import btnSettingDialog from './components/btnSettingDialog/index.vue';
  let timer;
  export default {
    components: { 
      'create-task-dialog': createTaskDialog,
      'tab-setting-dialog': tabSettingDialog,
      'btn-setting-dialog': btnSettingDialog,
    },
    dicts: [],
    data() {
      return {
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          historyStr: '',
          type: "",
          taskType: 'Q',
        },
        total: 0,
        isLoadingDeliverList: false,
        isShowSearch: false,
        deliverList: [],
        searchFullHeight: 0,
        selectedList: [],

        userBtnList: [],
        userTabList: [],
        //tab
        activeTabName: '',
        //表格
        loading: false,
        dataList: [],
        currentSearchHeight: 52,
        isShowBtnSettingDialog: false,
        //标签设置弹窗
        isShowTabSettingDialog: false,
        totalTabList: [],
        //创建任务弹窗
        isShowCreateTaskDialog: false
      };
    },
    //生命周期函数
    mounted() {
        this.getList();
        this.onGetUserButtons();
        this.onGetUserTabs();
    },
    created() {
    },
    methods: {
      handleCloseTaskDialog() {
        this.isShowCreateTaskDialog = false;
        this.getList();
      },
      handleChangeBtnDialogVisible() {
        this.isShowBtnSettingDialog = false;
        this.onGetUserButtons();
      },
      handleChangeTabDialogVisible() {
        this.isShowTabSettingDialog = false;
        this.onGetUserTabs();
      },
      handleSwitchTab(tab, event) { 
        switch(this.activeTabName) {
          case 'set':
            this.isShowTabSettingDialog = true;
            break;
        }
      },
      //****按钮事件--start */
      handleCreateQueryTask() {
        this.isShowCreateTaskDialog = true;
      },
      //****按钮事件--end */
      
      handleClickTableBtn(func_name) {
        switch(func_name) {
          case 'addQueryTask':
            this.handleCreateQueryTask();
            break;
          case 'emptyRetQuery':
            this.handleRequeryTask('isEmpty');
            break;
          case 'errRetQuery':
            this.handleRequeryTask('isErr');
            break;
          case 'checkRetQuery':
            this.handleRequeryTask('isErr');
            break;
          case 'setButton':
            this.isShowBtnSettingDialog = true;
            break;
        }
      },
      handleRequeryTask(type) {
        if(this.selectedList && this.selectedList.length <= 0) {
          this.$message.warning('请选择要重新查询的任务');
          return;
        }
        let mailNosArray = []
        const taskNoArray = this.$_.map(this.selectedList, item => {
          mailNosArray = mailNosArray.concat(item.mailnos);
          return item.taskNo
        });
        requeryTask({
          taskNoList: taskNoArray,
          mailnos: mailNosArray,
          reqType: type
        }).then(res => {
          if(res.code === 0) {
            this.$message.success('重新查询成功');
            this.getList();
          }
        })
      },
      //获取用户buttons
      onGetUserButtons() {
        getUserButtons().then(res => {
          this.userBtnList = res?.data;
        })
      },
      //获取用户tabs
      onGetUserTabs() {
        getUserTabs().then(res => {
          this.userTabList = res?.data;
        })
      },
      //获取快递公司列表
      onGetDeliverList(value) {
        getDeliveryCompanyList({
          page: 1,
          limit: 100,
          keyword: value
        }).then(res => {
          this.deliverList = res?.data;
        })
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.idsName = selection.map((item) => item.patrolId);
      },
      // 选中设置删除按钮状态
      handleSelect(selection, rows) {
        this.selectedList = selection;
      },
      /** 新增按钮操作 */
      handleAdd() {
        
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      handleRefresh() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          code: '',
          type: "",
          status: [],
          orgId: '',
          name: "",
          orgName: ''
        };
        this.getList();
      },
      /** 查询任务列表 */
      getList() {
        this.loading = true;
        getTaskList(this.queryParams).then(res => {
          this.selectedList = [];
          this.loading = false;
          this.dataList = res?.data;
          this.total = res?.total;
        })
      },
    }
  };
  </script>
